<template>
  <div class="page-goods df">

    <div class="navs fn">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item @click="handleClick" v-for="item in navList"
          :key="item" :title="item" />
      </van-sidebar>
    </div>
    <div class="f1 right-container">
      <!-- 商品列表 -->
      <div class="goods-list">
        <!-- 商品 -->
        <div v-for="item in goodsList" :key="item.name" class="good-item">
          <h2 class="title">{{item.name}}</h2>
          <!-- 食品列表 -->
          <div class="foods-list">
            <!-- 食品 -->
            <van-card v-for="subItem in item.foods" :key='subItem.id' num="2"
              :price="subItem.price" :desc="subItem.goodsDesc"
              :title="subItem.name" :thumb="subItem.imgUrl" />
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
//
import { mapGetters, mapState } from "vuex";
//引入滚动插件
import BScroll from '@better-scroll/core'
export default {
  data() {
    return {
      activeKey: 0,
      //定义一个空数组，来存储滑动高度
      heightList: [],

      loading:false,
    };
  },
  methods: {
    //左侧点击菜单
    handleClick(index) {
      this.loading=true
      //将左右索引值对应
      this.activeKey=index;
      //获取nodelist节点
      const goodsNodes = document.querySelectorAll('.good-item')

      //右侧滚动
      this.bs1.scrollToElement(goodsNodes[this.activeKey],500)
    },




    /*渲染方法 */
    renderScroll(){
           this.$nextTick(()=>{
       this.bs = new BScroll('.navs', {
        // ...... 详见配置项
         click:true,
    });
    this.bs1 = new BScroll('.right-container', {
        // ...... 详见配置项
         click:true,
         probeType:3  //派发滚动事件
    });
          //获取所有 good-item
    const goodsNodes = document.querySelectorAll(".good-item");
          //获取所有good-item盒子的高度 装进数组
          goodsNodes.forEach((el) => {
            this.heightList.push(el.clientHeight);
          });
          //监听bs2滚动
          this.bs1.on("scroll", ({ y }) => {

            if(this.loading) return

            let Y = Math.abs(y);
            /* 
              索引0  y>0 && y<1盒子
              索引1  y>1盒子 && y<1+2 盒子
              索引2  y>1+2盒子 && y<1+2+3 盒子
              大于前面盒子的和<前面盒子的和+自己高度
            */
            this.heightList.reduce((total, cur, index) => {
              if (Y > total && Y < total + cur) {
                //拿到索引赋值
                this.activeKey = index;
              }
              return total + cur;
            }, 0);
          });
          //滚动结束：
          this.bs1.on('scrollEnd',()=>{
            this.loading=false
          })
    })
        }
  },
  computed: {
    ...mapGetters("shop", ["navList"]),
    ...mapState("shop", ["goodsList"]),
  },
  async created() {
    //发送请求
    await this.$store.dispatch("shop/A_getGoodsData");
    //调用渲染
     this.renderScroll()
  },
};
</script>

<style lang="scss" scoped>
.page-goods {
  height: 100%;
  overflow: hidden;
}
.title {
  height: 40px;
  line-height: 40px;
  background: #f4f4f4;
  padding-left: 5px;
  border-left: 6px solid #ddd;
}
</style>